<template>
  <el-card>
    <el-descriptions class="margin-top" title="报警参数设置" :column="2" border>
      <template #extra>
        <el-space>
          <el-tooltip content="可手动输入并回车" placement="right">
            <el-select v-model="currentTeam" filterable class="type-select" @change="changeTeam">
              <el-option
                v-for="item in teams.arr"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-tooltip>
          <el-tooltip content="可手动输入并回车" placement="right">
            <el-select
              v-model="currentStation"
              filterable
              class="type-select"
              @change="changeStation"
            >
              <el-option
                v-for="item in stations.arr"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-tooltip>
          <el-tooltip content="可手动输入并回车" placement="right">
            <el-select
              v-model="currentPipeline"
              filterable
              class="type-select"
              @change="changePipeline"
            >
              <el-option
                v-for="item in pipelines.arr"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-tooltip>
          <el-button type="primary" @click="editParamConfigVisible = true">
            修改报警参数配置
          </el-button>
        </el-space>
      </template>

      <el-descriptions-item v-for="(value, key) in typeOptions" :key="key">
        <template #label>
          <div>{{ value.label }} (单位:{{ value.unit }})</div>
        </template>
        <template #default>
          <el-space v-if="paramConfig[key].id" :size="25">
            <span>
              下限: <el-tag size="small">{{ paramConfig[key].lowerLimit }}{{ value.unit }}</el-tag>
            </span>
            <span>
              上限: <el-tag size="small">{{ paramConfig[key].upperLimit }}{{ value.unit }}</el-tag>
            </span>
            <span>
              上一次修改时间: <el-tag size="small">{{ paramConfig[key].updateTime }}</el-tag>
            </span>
          </el-space>
          <el-space v-else :size="25">
            <span> 下限: <el-tag size="small">暂无</el-tag> </span>
            <span> 上限: <el-tag size="small">暂无</el-tag> </span>
          </el-space>
        </template>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>

  <el-dialog v-model="editParamConfigVisible" title="报警参数设置" width="30%">
    <el-form :model="paramConfigForm.val" label-width="auto" label-position="right" size="large">
      <el-form-item label="参数类型">
        <el-select
          v-model="paramConfigForm.val.type"
          class="type-select"
          @change="handleChangeType"
        >
          <el-option
            v-for="(value, key) in typeOptions"
            :key="key"
            :label="value.label"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="参数下限">
        <el-input-number v-model="paramConfigForm.val.lowerLimit" :precision="2" />
      </el-form-item>
      <el-form-item label="参数上限">
        <el-input-number v-model="paramConfigForm.val.upperLimit" :precision="2" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancelEditParamConfig">取 消</el-button>
      <el-button type="primary" @click="editParamConfig">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="ParamConfigCom">
import { typeOptions } from '../options/typeOption'
import { useParamConfig } from '../hooks/useParamConfig'
const {
  teams,
  stations,
  pipelines,
  currentTeam,
  currentStation,
  currentPipeline,
  paramConfigForm,
  paramConfig,
  editParamConfigVisible,
  changeTeam,
  changeStation,
  changePipeline,
  editParamConfig,
  handleChangeType,
  cancelEditParamConfig
} = useParamConfig()
</script>
<style lang="less" scoped>
.type-select {
  width: 240px;
}
</style>
